<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 辅助类</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">


</head>
<body>

<!--.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:500px 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。-->
<div class="container">
    文本<br>

    <h2>文本</h2>
    <p class="text-muted">该段落使用了样式 "text-muted"。</p>
    <a class="text-muted" href="http://www.w3cschool.cn">链接使用了样式 "text-muted"。</a>

    <h2>文本</h2>
    <p class="text-primary">该段落使用了样式 "text-primary"。</p>
    <a class="text-primary" href="http://www.w3cschool.cn">链接使用了样式 "text-primary"。</a>

    <h2>文本</h2>
    <p class="text-success">该段落使用了样式 "text-success"。</p>
    <a class="text-success" href="http://www.w3cschool.cn">链接使用了样式 "text-success"。</a>

    <h2>文本</h2>
    <p class="text-info">该段落使用了样式 "text-info"。</p>
    <a class="text-info" href="http://www.w3cschool.cn">链接使用了样式 "text-info"。</a>

    <h2>文本</h2>
    <p class="text-warning">该段落使用了样式 "text-warning"。</p>
    <a class="text-warning" href="http://www.w3cschool.cn">链接使用了样式 "text-warning"。</a>

    <h2>文本</h2>
    <p class="text-danger">该段落使用了样式 "text-danger"。</p>
    <a class="text-danger" href="http://www.w3cschool.cn">链接使用了样式 "text-danger"。</a>

    <h2>背景</h2>
    <p class="bg-primary">该段落使用了类 "bg-primary"。</p>
    <a class="bg-primary" href="/index">该链接使用了类 "bg-primary"。</a>

    <h2>背景</h2>
    <p class="bg-success">该段落使用了类 "bg-success"。</p>
    <a class="bg-success" href="/index">该链接使用了类 "bg-success"。</a>

    <h2>背景</h2>
    <p class="bg-info">该段落使用了类 "bg-info"。</p>
    <a class="bg-info" href="/index">该链接使用了类 "bg-info"。</a>

    <h2>背景</h2>
    <p class="bg-warning">该段落使用了类 "bg-warning"。</p>
    <a class="bg-warning" href="/index">该链接使用了类 "bg-warning"。</a>

    <h2>背景</h2>
    <p class="bg-danger">该段落使用了类 "bg-danger"。</p>
    <a class="bg-danger" href="/index">该链接使用了类 "bg-danger"。</a>

    <br>其他<br>
    <h2>实例</h2>
    <div class="pull-left">元素浮动到左侧</div>
    <div class="pull-right">元素浮动到右侧</div>

    <h2>实例</h2>
    <div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div>

    <h2>实例</h2>
    <p> .show 类强制一个元素显示:</p>
    <p class="show">该段落强制显示</p>
    <p> .hidden 类强制一个元素隐藏 :</p>
    <p class="hidden">该段落强制隐藏</p>

    <h2>实例</h2>
    <p> .text-only 类将页面元素所包含的文本内容替换为背景图:</p>
    <div class="text-hide">在 div 元素中插入一些文本。</div>

    <h2>实例</h2>
    <p> .close 类可以显示一个关闭按钮。</p>
    <button type="button" class="close"><span aria-hidden="true">x</span><span class="sr-only">关闭</span></button>


    <h2>实例</h2>
    <p> .caret 类显示了一个下拉的功能: <span class="caret"></span></p>
    <p> .caret 类在按钮中使用：</p>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">一个链接</a></li>
            <li><a href="#">另一个链接 link</a></li>
            <li><a href="#">其他功能</a></li>
        </ul>
    </div>


</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>